<template>
  <div>
    <h1>商品热销爆款</h1>
    <div>
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="anniu(index)"
        :class="{ active: c === index }"
      >
        {{ tab }}
      </button>
    </div>
    <div>
      <div v-for="item in fil" :key="item.id">
        <img :src="item.img" width="100px" height="100px" /><br />
        {{ item.trade_name }} <br />
        {{ item.Introduction }} <br />
        {{ item.price }}
        <button @click="addbtn(item)">添加到购物车</button>
      </div>
    </div>
    <!-- 购物车区域 -->
    <div>
      <h2>购物车</h2>
      <div>
        <input type="checkbox" v-model="isAll" @change="handAll" />全选
        <button @click="del">删除选中</button>
      </div>
      <!-- 列表 -->
      <div v-if="cart.length > 0">
        <div v-for="(item, i) in cart" :key="item.id">
          <input type="checkbox" v-model="item.sel" @change="handItem" />
          <div>
            <img :src="item.img" width="100px" height="100px" />
            <p>{{ item.trade_name }}</p>
          </div>
          <div>${{ item.price }}</div>
          <div>
            <button @click="minus(i)" :disabled="item.num <= 1">-</button>
          </div>
          <input
            type="number"
            v-model.number="item.num"
            @change="handNum(i)"
            min="1"
          />
          <div><button @click="plus(i)">+</button></div>
          <div>${{ item.price * item.num }}</div>
          <button @click="remove(i)">删除</button>
        </div>
      </div>
      <div v-else>购物车为空</div>
    </div>

    <!-- 结算 -->
    <div>
      <p>已选择{{ selCount }}件商品</p>
      <p>总价${{ total }}</p>
      <button>去结算</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabs: ["空调", "平板电视", "生活电器", "洗衣机", "冰箱", "厨房大电"],
      c: 0,
      arr: [
        {
          id: 0,
          img: "../assets/冰箱1.png",
          trade_name: "美的空调",
          Introduction: "简介",
          price: 6599,
          num: 0,
        },
        {
          id: 1,
          img: "../assets/冰箱2.png",
          trade_name: "美的空调",
          Introduction: "简介",
          price: 6599,
          num: 1,
        },
        {
          id: 2,
          img: "../assets/冰箱3.png",
          trade_name: "美的空调",
          Introduction: "简介",
          price: 6599,
          num: 0,
        },
        {
          id: 3,
          img: "../assets/冰箱4.png",
          trade_name: "美的空调",
          Introduction: "简介",
          price: 6599,
          num: 0,
        },
        {
          id: 4,
          img: "../assets/电视1.png",
          trade_name: "TCL电视",
          Introduction: "简介",
          price: 3499,
          num: 1,
        },
        {
          id: 5,
          img: "../assets/电视2.png",
          trade_name: "TCL电视",
          Introduction: "简介",
          price: 3499,
          num: 1,
        },
        {
          id: 6,
          img: "../assets/电视3.png",
          trade_name: "TCL电视",
          Introduction: "简介",
          price: 3499,
          num: 1,
        },
        {
          id: 7,
          img: "../assets/电视4.png",
          trade_name: "TCL电视",
          Introduction: "简介",
          price: 3499,
          num: 1,
        },
        {
          id: 8,
          img: "../assets/热1.png",
          trade_name: "热水器",
          Introduction: "简介",
          price: 2499,
          num: 2,
        },
        {
          id: 9,
          img: "../assets/热2.png",
          trade_name: "热水器",
          Introduction: "简介",
          price: 2499,
          num: 2,
        },
        {
          id: 10,
          img: "../assets/热3.png",
          trade_name: "热水器",
          Introduction: "简介",
          price: 2499,
          num: 2,
        },
        {
          id: 11,
          img: "../assets/热4.png",
          trade_name: "热水器",
          Introduction: "简介",
          price: 2499,
          num: 2,
        },
        {
          id: 12,
          img: "../assets/洗衣机1.png",
          trade_name: "海尔洗衣机",
          Introduction: "简介",
          price: 2499,
          num: 3,
        },
        {
          id: 13,
          img: "../assets/洗衣机2.png",
          trade_name: "海尔洗衣机",
          Introduction: "简介",
          price: 2499,
          num: 3,
        },
        {
          id: 14,
          img: "../assets/洗衣机3.png",
          trade_name: "海尔洗衣机",
          Introduction: "简介",
          price: 2499,
          num: 3,
        },
        {
          id: 15,
          img: "../assets/洗衣机4.png",
          trade_name: "海尔洗衣机",
          Introduction: "简介",
          price: 2499,
          num: 3,
        },
        {
          id: 16,
          img: "../assets/冰箱1.png",
          trade_name: "松下冰箱",
          Introduction: "简介",
          price: 5499,
          num: 4,
        },
        {
          id: 17,
          img: "../assets/冰箱2.png",
          trade_name: "松下冰箱",
          Introduction: "简介",
          price: 5499,
          num: 4,
        },
        {
          id: 18,
          img: "../assets/冰箱3.png",
          trade_name: "松下冰箱",
          Introduction: "简介",
          price: 5499,
          num: 4,
        },
        {
          id: 19,
          img: "../assets/冰箱4.png",
          trade_name: "松下冰箱",
          Introduction: "简介",
          price: 5499,
          num: 4,
        },
        {
          id: 20,
          img: "../assets/油烟机1.png",
          trade_name: "油烟机",
          Introduction: "简介",
          price: 5555,
          num: 5,
        },
        {
          id: 21,
          img: "../assets/油烟机2.png",
          trade_name: "油烟机",
          Introduction: "简介",
          price: 5555,
          num: 5,
        },
        {
          id: 22,
          img: "../assets/油烟机3.png",
          trade_name: "油烟机",
          Introduction: "简介",
          price: 5555,
          num: 5,
        },
        {
          id: 23,
          img: "../assets/油烟机4.png",
          trade_name: "油烟机",
          Introduction: "简介",
          price: 5555,
          num: 5,
        },
      ],
      cart: [],
      isAll: false,
    };
  },
  mounted() {},
  computed: {
    //切换
    fil() {
      return this.arr.filter((item) => item.num === this.c);
    },
    selCount() {
      return this.cart
        .filter((item) => item.sel)
        .reduce((sum, item) => sum + item.num, 0);
    },
    total() {
      return this.cart
        .filter((item) => item.sel)
        .reduce((sum, item) => sum + item.price * item.num, 0);
    },
  },
  methods: {
    anniu(index) {
      this.c = index;
    },
    addbtn(item) {
      const find = this.cart.find((i) => i.id === item.id);
      if (find) {
        find.num++;
      } else {
        this.cart.push({
          id: item.id,
          trade_name: item.trade_name,
          price: item.price,
          img: item.img,
          num: 1,
          sel: true,
        });
      }
      this.handItem();
    },
    handAll() {
      this.cart.forEach((item) => {
        item.sel = this.isAll;
      });
    },
    handItem() {
      this.isAll = this.cart.length > 0 && this.cart.every((item) => item.sel);
    },
    minus(i) {
      if (this.cart[i].num > 1) {
        this.cart[i].num--;
      }
    },
    plus(i) {
      this.cart[i].num++;
    },
    handNum(i) {
      let num = this.cart[i].num;
      if (isNaN(num) || num < 1) {
        this.cart[i].num = 1;
      } else {
        this.cart[i].num = Math.floor(num);
      }
    },
    remove(i) {
      this.cart.splice(i, 1);
      this.handItem();
    },
    del() {
      this.cart = this.cart.filter((item) => !item.sel);
      this.isAll = false;
    },
  },
};
</script>